<template>
	<div class="index">
		<div class="body">
			<img class="bg" v-for="(item,i) in activeInfo.activityPosterUrls" :src="item" :key='i' />
			<div class="operateBtn" v-show="!show">
				<div>
					<button class="operateBtnItem" @click="show=true;bargaining=false">我要拼团</button>
					<button class="operateBtnItem" @click="show=true;bargaining=true">发起砍价</button>
				</div>
			</div>
		</div>
		<van-popup :overlay='true' round position="bottom" v-model="show">
			<div class="confirm">
				<span @click="show=false;isHelped=false">关闭</span>
				<span :style="{color:textColor}" @click="submit">{{bargaining ? '砍价':'开团'}}</span>
			</div>
			<bargaining v-if="bargaining"></bargaining>
			<make-group ref='makeGroup' v-if="!bargaining" :activeInfo="activeInfo"></make-group>
		</van-popup>
		
	</div>
</template>


<script>
	import makeGroup from './makeGroup.vue'
	import bargaining from './bargaining.vue'
	const serviceAPI = require('@/serviceAPI.js')
	export default {
		data() {
			return {
				isJoinGroup:1,
				groupCode:'',
				jssdkConfigInfo:{},
				groupInfo: {},
				activeInfo: {}, //活动详情
				textColor: '#4f9fef',
				show: false,
				bargaining: false, //是否点击的是砍价按钮
				isHelped: false, //是否已经帮砍
				imgs: [require('../assets/images/u=368065610,855414273&fm=26&gp=0.jpg'), require(
					'../assets/images/u=368065610,855414273&fm=26&gp=0.jpg')]
			}
		},
		components:{
			makeGroup,
			bargaining
		},
		created() {
			if(location.href.indexOf('groupCode') !== -1){
				this.show = true
				this.bargaining = false
			}
			this.activityCode = this.$route.params.activityCode
			this.getActiveInfo()
		},
		methods: {
			// 获取活动详情
			async getActiveInfo() {
				const res = await this.$axios.get(`${serviceAPI.getActiveInfo}?activityCode=${this.activityCode}&openId=${localStorage.getItem('openId')}`)
				if (res.data.code === 10000) {
					this.activeInfo = res.data.data
				}
			},
			submit() {
				if(this.activeInfo.isJoinGroup === 1){ // 用户未入团
					if(location.href.indexOf('groupCode') !== -1){//用户是点分享链接进入
						this.$refs.makeGroup.joiningGroup()
					}else{
						this.$refs.makeGroup.getGroupInfoOpen()
					}
					
				}else{
					this.show = false
				}
			},
			handleHelp() { // 帮砍操作
				this.isHelped = true
			},
		}
	}
</script>

<style scoped>
	.helpPersonList {
		display: flex;
		justify-content: space-between;
		margin-top: 0.4375rem;
		align-items: center;
	}

	.helpPersonLeft {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.helpPersonLeft img {
		width: 2.75rem;
		height: 2.75rem;
		object-fit: cover;
		margin-right: 0.7125rem;
		border-radius: 50%;
	}

	.helpedBtn {
		color: white;
		background-color: #ccc;
	}

	.smallDangerBtn {
		padding: 0 16px;
		border-radius: 7px !important;
	}

	.van-popup {
		background: transparent;
		background-color: rgba(255, 255, 255, 0.8);
	}

	/* .van-overlay{
		background: no-repeat;
	} */
	.bg {
		width: 100%;
		height: 84vh;
		object-fit: fill;
	}
	.operateBtn {
		position: fixed;
		bottom: 1rem;
		z-index: 99;
		padding: 10rpx;
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.operateBtn button {
		display: block;
		margin-top: 0.625rem;
		padding: 10px 50px;
		-moz-box-shadow: 0px 1px 6px #858585;
		-webkit-box-shadow: 0px 1px 6px #858585;
		box-shadow: 0px 1px 6px #858585;
	}

	.operateBtnItem {
		color: white;
		font-weight: bold;
		border-radius: 8px;
		outline: none;
		border: none;
		background-color: red;
	}

	.infoitem {
		font-size: 0.875rem;
		color: #000000;
		font-weight: 700;
	}

	.connectionInfo {
		padding: 0.625rem;
		padding-top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
	}

	.QRCode {
		width: 100px;
		height: 100px;
		object-fit: cover;
	}

	.joinBtn {
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.confirm {
		display: flex;
		justify-content: space-between;
		padding: 0.8rem;
		font-size: 14px;
	}

	.confirm span:nth-child(1) {
		color: red;
		font-weight: 700;
	}

	.confirm span:nth-child(2) {
		font-weight: 700;
	}

	.goods {
		background: white;
		padding: 0.825rem;
		display: flex;
		margin: 0 0.9rem 0.4rem 0.9rem;
	}

	.goodsImg {
		flex: 3;
		width: 100px;
		height: 95px;
		object-fit: cover;
		margin-right: 0.7125rem;
	}

	.goodsInfo {
		flex: 7;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.goodsInfoFirstDiv {
		display: flex;
		justify-content: space-between;
	}

	.goodsName {
		font-weight: 600;
		font-size: 14px;
	}

	.personNum {
		font-size: 13px;
	}

	.oldPrice {
		color: #FF0000;
		text-decoration: line-through;
		font-size: 14px;
	}

	.courseNum {
		font-size: 13px;
	}

	.curPrice {
		font-size: 15px;
		font-weight: 700;
		color: #FF0000;
	}

	.helpInfo {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 0.4375rem
	}

	.helpBtn {
		margin-top: 0.525rem;
		display: flex;
		justify-content: space-between;
	}

	.person {
		display: flex;
		justify-content: space-around;
		padding: 0.625rem 2.5rem;
	}

	.personItem {
		border-radius: 50%;
		border: 1px solid #eee;
		width: 3.75rem;
		height: 3.75rem;
	}

	.addPerson {
		background: white;
		text-align: center;
		line-height: 3.75rem;
		font-size: 41px;
		color: #eee;
	}

	.person img {
		width: 3.75rem;
		height: 3.75rem;
		object-fit: cover;

	}
</style>